<template>
  <div class="sale-hotel">
        <Breadcrumb :pathContent="content"/>
        <div class="sale-hotel-content">
          <el-form>
            <el-form-item>
                <el-dropdown trigger="click" @command="dropdownStateChange">
                    <span class="el-dropdown-link">
                        {{dropdownValue}}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="{value: null, title: '全部状态'}">
                            全部状态
                        </el-dropdown-item>
                        <el-dropdown-item :command="{value: 0, title: '已新增'}">
                           已新增
                        </el-dropdown-item>
                        <el-dropdown-item :command="{value: 1, title: '未新增'}">
                            未新增
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <div class="area-select">
                    <el-cascader
                    :options="cities"
                    :props="{ value: 'cityid', label: 'city', children: 'citiess' }"
                    @change="handleCascader"
                    filterable
                    change-on-select
                    >
                    </el-cascader>
                </div>
                <div class="input-with-select el-input el-input-group el-input-group--append">
                    <input autocomplete="off" placeholder="请输入酒店名/酒店ID" type="text" rows="2" validateevent="true" class="el-input__inner" v-model="searchKey" @keyup.enter="searchHotel">
                </div>
                <el-button type="primary" @click="searchHotel" class="searchHotel"><i class="el-icon-search"></i></el-button>
            </el-form-item>
            <div class="hotel-state">
                <el-form-item>
                    <el-button @click="batchAdd" v-if="addsalehotel">批量新增</el-button>
                </el-form-item>
            </div>
            <el-form-item>
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    min-height="250"
                    ref="multipleTable"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                    fixed
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    fixed
                    prop="num"
                    label="酒店ID"
                    width="80">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="酒店名称"
                    width="200">
                    </el-table-column>
                    <el-table-column
                    prop="province"
                    label="所在省份"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="city"
                    label="所在城市"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="area"
                    label="所在区/县"
                    width="200">
                    </el-table-column>
                    <el-table-column
                    prop="star"
                    label="星级"
                    width="80">
                    </el-table-column>
                    <el-table-column
                    prop="status"
                    label="状态"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    fixed="right"
                    label="操作"
                    v-if="addsalehotel || saleroom"
                    width="120">
                    <template slot-scope="scope">
                        <el-button
                        type="text"
                        v-if="(tableData[scope.$index].id !== null) && addsalehotel"
                        disabled
                        size="small">   
                        新增
                        </el-button>
                        <el-button
                        @click.native.prevent="stateRow(scope.$index, tableData)"
                        type="text"
                        v-if="(tableData[scope.$index].id === null) && addsalehotel"
                        size="small">
                        新增
                        </el-button>
                        <el-button
                        type="text"
                        v-if="(tableData[scope.$index].id === null) && saleroom"
                        disabled
                        size="small">   
                        房型
                        </el-button>
                        <el-button
                        type="text"
                        v-if="(tableData[scope.$index].id !== null) && saleroom"
                        @click.native.prevent="jumpRoom(tableData[scope.$index].id)"
                        size="small">
                        房型
                        </el-button>
                    </template>
                    </el-table-column> 
                </el-table>
            </el-form-item>
            <el-form-item style="margin-top: 20px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, prev , pager , next, sizes, jumper"
                    :total="total">
                </el-pagination>    
            </el-form-item>   
        </el-form>
      </div>
  </div>
</template>
<script>
import { getSaleHotelAll, addSaleHotel } from '../../../public/js/saleHotel'
const Breadcrumb = () => import('@/components/common/Breadcrumb')
const cityData = require('@/data/cities.json')
export default {
  name: 'AddSaleHotelList',
  data () {
    return {
      radio: '1',
      dropdownValue: '全部状态',
      cities: cityData.provincesEntities,
      searchKey: '',
      content: {
        firstTitle: '酒店管理',
        secondTitle: '新增列表',
        type: 'close'
      },
      tableData: [],
      selectionArray: [],
      total: 0,
      hotelIds: [],
      status: null,
      pageSize: 10,
      pageNum: 1,
      city: ''
    }
  },
  created () {
    this.requestSaleHotelAll()
    window.commo.showMenu(this)
  },
  methods: {
    requestSaleHotelAll () {
      getSaleHotelAll(this).then(res => {
        if (res.data.errCode === 0) {
          this.total = res.data.total
          this.tableData = res.data.list
        }
      })
    },
    jumpRoom (val) {
      window.bus.$emit('hotelId', val)
      this.$router.push('/index/room_management')
    },
    addSaleHotels () {
      addSaleHotel(this).then(res => {
        if (res.data.errCode === 0) {
          this.total = res.data.total
          this.tableData = res.data.list
          this.$message.success('新增成功')
        }
      })
    },
    batchAdd () {
      this.hotelIds = []
      new Promise((resolve, reject) => {
        resolve(
          this.selectionArray.forEach((item, index) => {
            this.hotelIds.push(item.hotelId)
          })
        )
      }).then(() => {
        if (this.hotelIds.length > 0) {
          this.addSaleHotels()
        } else {
          this.$message({
            message: '您还未勾选任何酒店',
            type: 'warning'
          })
        }
      })
    },
    stateRow (index, rows) {
      this.hotelIds = []
      this.hotelIds.push(this.tableData[index].hotelId)
      if (this.tableData[index].status === '未新增') {
        this.$confirm('此操作将新增此酒店,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.addSaleHotels()
        }).catch(() => {
        })
      }
    },
    handleCascader (val) {
      this.city = parseInt(val[val.length - 1])
      this.requestSaleHotelAll()
    },
    searchHotel () {
      this.requestSaleHotelAll()
    },
    dropdownStateChange (data) {
      this.status = data.value
      this.requestSaleHotelAll()
      this.dropdownValue = data.title
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.requestSaleHotelAll()
    },
    handleCurrentChange (val) {
      this.pageNum = val
      this.requestSaleHotelAll()
    },
    handleSelectionChange (row) {
      this.selectionArray = row
    }
  },
  components: {
    Breadcrumb
  }
}
</script>
<style lang="scss" scoped>
    .sale-hotel-content {
        background-color: white;
        padding: 20px;
        position: relative;
        .el-form {
            .el-form-item {
                .el-form-item__content {
                    .el-dropdown {
                        float: left;
                        margin-right: 20px;
                    }
                    .searchHotel{
                        float: left;
                        margin-left:15px;
                        padding: 9px 21px;
                    }
                    .el-input {
                      float: left;
                      width: 300px;
                      input {
                        height: 34px;
                        line-height: 34px;
                    }
                  }
                  .el-pagination {
                        text-align: right;
                        .el-pagination__jump {
                            .el-input {
                                float: none!important;
                                width: 50px!important;
                            }
                        }
                        .el-input {
                            width: 100px;
                        }
                    }
                    .el-table__header,.el-table__body{
                        width: 100%!important;
                    }
                }
            }
        }
    }
    .expand-trigger div {
        height: 50px!important;
    }
    .hotel-state {
        text-align: left;
        .el-button {
            font-size: 12px;
            color: #45a2ff;
            border: 1px solid #45a2ff;
            line-height: 32px;
            padding: 0 20px;
        }
    }
    .area-select {
        float: left;
        line-height: 1;
        width: 200px;
        margin-right: 20px;
        .el-cascader {
            line-height: 1;
            width: 200px;
            .el-input {
                width: 200px!important;
            }
        }
        .el-cascader .el-icon-arrow-down {
            line-height: 1;
        }
    }
    .el-popper[x-placement^=bottom] {
        width: 100px!important;
        padding: 0;
    }   
    .el-popper[x-placement^=bottom] .el-form-item .el-form-item__content .title {
        background-color: rgb(241, 243, 248);
        text-align: left;
        padding-left: 20px;
        h1 {
           font-size: 14px;
        }
    }
    .el-popper[x-placement^=bottom] .el-form-item .el-form-item__content .radio-style {
        padding: 20px;
        text-align: center;
        overflow: hidden;
        .radio-left, .radio-right {
            float: left;
            width: 50%;
        }
    }
    .popver-btn {
        overflow: hidden;
        .btn-left, .btn-right {
            width: 50%;
            float: left;
            text-align: center;
        }
    }
</style>
